/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import Taro, { Component } from '@tarojs/taro'

// project
import { CPage, CContent, CHeader, CFooter, CFloat, CAround, CBetween, CCenter, CRow, CWrap, CLine, CHand, CItemX, CItemY, CText, CLabel, CSvg, CImage, CButton, CColumn } from '../../../library/comp';
import { Base64, Gen, Time, Zip, Session, Storage, Http } from '../../../library/func';
import Icon from '../../../project/style/icon';
import DoHttp from '../../../project/func/http/http';

/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class Index extends Component {

	/*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props) {
		super(props);

		/**
		 * state
		 */
		this.state = {
			userInfo:{},

			set_dist_number:'10000',

			set_commission:1000,
			commission_today:1000,
			commission_month:1000,
			commission_total:1000,
			fans_count:1000,


		}

	}

	/*------------------------------------------------------------------------------------
	 * 生命周期
	 *-----------------------------------------------------------------------------------*/
	// didMount
	componentDidMount() {

		Storage.get({
			key: 'userInfo',
			success:(res)=>{
				console.log(res);
				this.setState({
					userInfo:res,
				})
			}
		});

		DoHttp.get({
			url:'vip/home.php',
			success:(res)=>{
				console.log(res);

				this.setState({
					set_dist_number:res.user.set_dist_number,
					set_commission:res.user.set_commission,
					commission_today:res.commission_today,
					commission_month:res.commission_month,
					commission_total:res.commission_total,
					fans_count:res.fans_count,
		
				})
			}
		})
	}
	
	/*------------------------------------------------------------------------------------
	 * 事件处理
	 *-----------------------------------------------------------------------------------*/
	// onClick
	onClick = (id, e)=> {
		console.log('onClick: ' + id)
    }
    
    // onRedirect
    onRedirect = (url, e)=> {
        wx.redirectTo({
            url: url
        })
    }

    // onNavigate
    onNavigate = (url, e)=> {

    }

	/*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/

	config = {
        navigationBarTitleText: 'vip首页',
        navigationBarBackgroundColor: '#dd2f3c',
        navigationBarTextStyle: '#fff'
    }

	//复制剪贴板
	copyText = (e) => {

		wx.setClipboardData({
			data: this.state.set_dist_number,
			success: function(res) {
			  wx.getClipboardData({
				success: function(res) {
				  console.log(res.data) // data
				}
			  })
			}
		})		  
	}

	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render () {
		return (
			<CPage>
				<CContent style="background:#F7F7F7" pb="100">
					
					{/* VIP信息、店铺分享 */}

					<CRow h='200' rb="20" y="top" bg="#232323">
						<CRow h="100" mt="30" y="center" class="f08">
							<image style="width:150rpx; height:150rpx; border-radius: 150rpx; margin-left:25rpx;"  src={ this.state.userInfo.avatarUrl }></image>
							<CItemY ml="15" x="left">
								<text style="color:#fff; font-size:16px; line-height:16px">{ this.state.userInfo.nickName  }</text>
								<CRow>
									<text style="color:#fff; font-size:14px; line-height:14px; line-height:18px">邀请码：{ this.state.set_dist_number }</text><CHand onClick={ this.copyText.bind(this) } ml="15" px="15" ra="20" bg="#404040" size="14" color="#fff">复制</CHand>
								</CRow>
							</CItemY>
						</CRow>	
						<CRow h="100" y="center" mt="30" class="f02">

							{/* {>>>>>>>>>>>>>>>>>  分享功能} */}
							<CHand mr="-15" class="f1" x="center" ra="20" py="5" bg="#DAB983" size="14" color="#866D3C">店铺分享</CHand>
						</CRow>
					</CRow>	

					{/* 可消费佣金、预估收入 */}
					<CRow  mt='-50' x="center" >
						<CColumn class="f095" pa="20" bg="#E6C697" ra="10">
							<CRow>
								<CItemY class="f1" x="left">
									<CText size="14" lh="20" color="#866D3C">可消费金额(元)</CText>
									<text style="font-size:40px; line-height:60px; color:#866D3C">{ this.state.set_commission }</text>
								</CItemY>
								<CHand class="f1" x="right">
									{/* {>>>>>>>>>>>>>>>>>  需要跳页} */}
									<CText size="16" ra="10" px="10" py="20" bg="#FEF4EB" color="#866D3C">VIP权益</CText>
								</CHand>
							</CRow>

							<CBetween mt="10" y="center">


								<CItemY x="center" class="f05">
									<text style="font-size:14px; line-height:20px; color:#866D3C">{ this.state.commission_today }</text>
									<CText size="14" lh="20" color="#866D3C">今日预估收入</CText>
								</CItemY>

								<CHand bg="#866D3C" w="1" h="20"></CHand>

								<CItemY x="center" class="f05">
									<text style="font-size:14px; line-height:20px; color:#866D3C">{ this.state.commission_month }</text>
									<CText size="14" lh="20" color="#866D3C">本月预估收入</CText>
								</CItemY>

								<CHand bg="#866D3C" w="1" h="20"></CHand>


								<CItemY x="center" class="f05">
									<text style="font-size:14px; line-height:20px; color:#866D3C">{ this.state.commission_total }</text>
									<CText size="14" lh="20" color="#866D3C">累计预估收入</CText>
								</CItemY>


							</CBetween>

							<CLine x="center" mt="10">
								<CText size="14" lh="20" color="#866D3C">退款,不结算佣金</CText>
							</CLine>

						</CColumn>
					</CRow>

					{/* 粉丝数、分享创业礼包等等 */}
					<CRow mt='10' x="center">

						<CBetween class="f095" bg='#fff' mt="10" y="center" ra="10">

							{/* {>>>>>>>>>>>>>>>>>  需要跳页} */}
							<CItemY x="center" pa="10" class="f05">
								<text style="font-size:14px; line-height:20px; color:#222">{ this.state.fans_count }</text>
								<CText size="12" lh="30" color="#999">粉丝数（个）</CText>
							</CItemY>

							<CHand bg="#eee" w="1" h="20"></CHand>

							{/* {>>>>>>>>>>>>>>>>>  需要跳页} */}
							<CItemY x="center" pa="10" class="f05">
								<CText size="14" lh="30" color="#222">分享创业礼包</CText>
								<CText size="12" lh="30" color="#999">赚100元</CText>
							</CItemY>

							<CHand bg="#eee" w="1" h="20"></CHand>

							{/* {>>>>>>>>>>>>>>>>>  需要跳页} */}
							<CItemY x="center" pa="10" class="f05">
								<CText size="14" lh="30" color="#222">邀请专属粉丝</CText>
								<CText size="12" lh="30" color="#999">赚佣金</CText>
							</CItemY>


						</CBetween>

					</CRow>

					{/* 数据统计 */}
					<CRow mt='10' x="center">

						<CColumn class="f095" bg='#fff' mt="10" y="center" ra="10">

							<CLine x="left" bb="#eee solid 2px">
								<CText size="16" ml="20" lh="50">数据统计</CText>
							</CLine>

							<CBetween>

								{/* {>>>>>>>>>>>>>>>>>  需要跳页} */}
								<CItemY x="center" pa="10" class="f05">
									<CSvg w='30' h='30' icon={Icon.fav} />
									<CText size="12" lh="30" color="#999"mt="5">浏览用户</CText>
								</CItemY>

								{/* {>>>>>>>>>>>>>>>>>  需要跳页} */}
								<CItemY x="center" pa="10" class="f05">
									<CSvg w='30' h='30' icon={Icon.package} />
									<CText size="12" lh="30" color="#999"mt="5">推广订单</CText>
								</CItemY>

								{/* {>>>>>>>>>>>>>>>>>  需要跳页} */}
								<CItemY x="center" pa="10" class="f05">
									<CSvg w='30' h='30' icon={Icon.store} />
									<CText size="12" lh="30" color="#999"mt="5">销售详情</CText>
								</CItemY>

								{/* {>>>>>>>>>>>>>>>>>  需要跳页} */}
								<CItemY x="center" pa="10" class="f05">
									<CSvg w='30' h='30' icon={Icon.presenter} style="color:#000" />
									<CText size="12" lh="30" color="#999"mt="5">买家管理</CText>
								</CItemY>
							</CBetween>

						</CColumn>



					</CRow>

				</CContent>

				{/* Footer */}
				<CFooter h='50' bg='#06f'>Footer</CFooter>
			</CPage>
		)
	}
}


